<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="base/head::head"/>
<!--业务表单基础信息-->
<body class="easyui-layout">
<div id="west_tool">
    <a href="#" class="icon-refresh" onclick="onRefreshDataList()"></a>
</div>
<div data-options="region:'west',split:true,title:'业务表',tools:'#west_tool'" style="width:150px;">
    <div id="list" class="easyui-datalist" data-options="url:'../table/list',valueField:'tableName',textField:'tableDisplay',method:'get',fit:true,border:false,animate:true,onClickRow:onItemClick"></div>
</div>

<div data-options="region:'center'" style="overflow: hidden;">
    <div class="easyui-layout" data-options="fit:true,border:false">
        <div data-options="region:'center',title:'业务列表',border:false">
            <table id="table" class="easyui-datagrid" data-options="fit:true,method:'get',idField:'id',rownumbers:true,singleSelect:true,onClickRow:onTableRowClick">
                <thead>
                <tr>
                    <th data-options="field:'id',width:80,align:'center',checkbox:true">序号</th>
                    <th data-options="field:'tableName',align:'center',width:150">表名称</th>
                    <th data-options="field:'formName',width:120,align:'center'">业务名称</th>
                    <th data-options="field:'formDisplay',width:120,align:'center'">显示名称</th>
                    <th data-options="field:'showOrder',width:80,align:'center'">显示顺序</th>
                    <th data-options="field:'formStatus',align:'center',width:100">业务状态</th>
                    <th data-options="field:'formComment',align:'center',width:150">备注</th>
                </tr>
                </thead>
            </table>
        </div>
        <div data-options="region:'south',title:'业务配置信息',split:true,border:false,height:300" style="overflow: hidden;">
            <form id="form" method="post">
                <table>
                    <tr>
                        <td>表名称:</td>
                        <td>
                            <input id="id" name="id" type="hidden"/>
                            <input id="tableName" name="tableName" class="easyui-textbox" data-options="required:true,editable:false,width:150"/></td>
                        <td>业务名称:</td>
                        <td><input name="formName" class="easyui-textbox" data-options="prompt:'不能重复',required:true,width:150,validType:'length[1,30]'"/></td>

                        <td>显示名称:</td>
                        <td>
                            <input name="formDisplay" class="easyui-textbox" data-options="required:true,width:150"/>
                        </td>
                    </tr>
                    <tr>
                        <td>显示顺序:</td>
                        <td><input name="showOrder" class="easyui-numberspinner" data-options="min:0,value:1,width:150"/></td>
                        <td>业务状态:</td>
                        <td>
                            <select name="formStatus" class="easyui-combobox" data-options="value:1,required:true,panelHeight:'auto',width:150">
                                <option value="0">禁用</option>
                                <option value="1">正常</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>备注:</td>
                        <td colspan="5">
                            <input name="formComment" class="easyui-textbox" data-options="multiline:true,height:100,validType:'length[0,100]'" style="width: 100%;"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="onAdd()">新增</a>
                            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="onSave()">保存</a>
                            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-delete'" onclick="onDelete()">删除</a>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/utils/Form.js}"></script>
<script type="text/javascript">

    function onItemClick(index, node) {
        // 清空form数据
        onFormClear();
        // 清空业务表单数据
        $("#table").datagrid("loadData", []);
        $("#table").datagrid("unselectAll");
        // 设置表名称， 以防止该表没有对应的业务
        // $("#tableName").textbox("setValue", node.tableName);
        // $("#id").val(0);
        $("#table").datagrid({
            "url": "info?tn=" + node.tableName,
            "method": "get"
        });
    }

    function onTableRowClick(index, node) {
        $("#form").form("load", node)
    }

    function onRefreshDataList() {
        $("#list").datalist("reload");
        $("#table").datagrid("loadData", []);
        $("#table").datagrid("unselectAll");
        onFormClear();
    }

    function onFormClear() {
        $("#form").form("clear");
        var formVO = $("#list").datalist("getSelected")
        if(formVO != undefined && formVO != null){
            $("#tableName").textbox("setValue", formVO.tableName);
            $("#id").val(0);
        }
    }

    function onAdd() {
        onFormClear();
    }

    function onSave() {
        $("#form").ajaxForm({
            "url": "save",
            "method": "post",
            "dataType": "json",
            "beforeSubmit": function () {
                // 表单有效性验证
                return $("#form").form("validate");
            },
            "success": function (data) {
                if (data) {
                    AlertUtil.info(data.msg)
                    if (data.code == 1) {
                        $("#table").datagrid("unselectAll");
                        $("#table").datagrid("reload");
                        onFormClear();
                    }
                } else {
                    AlertUtil.error("处理错误，请稍后再试！")
                }
            }
        }).submit();
    }

    function onDelete() {
        var id = $("#id").val();
        if (id == "" || id == 0) {
            AlertUtil.error("请选择后，再操作！")
            return;
        }

        $.messager.confirm("提示", "确定删除?", function (data) {
            if (data) {
                onDeleteHandler(id)
            }
        });
    }

    function onDeleteHandler(id) {
        AjaxUtil.post("del/" + id, "", function (data) {
            AlertUtil.info(data.msg)
            if (data.code == 1) {
                onFormClear();
                $("#table").datagrid("reload");
            }
        });
    }
</script>
</body>
</html>